<!--
 * @Author: xjt
 * @Date: 2021-06-26 10:49:46
 * @LastEditTime: 2021-06-26 13:33:21
 * @Description: 用户综合管理信息预览tab组件
 * @LastEditors: xjt
-->
<template>
  <el-dialog
    custom-class="userDetailsInfo el-common-dialog"
    title="详细信息"
    :visible.sync="dialogVisible"
    width="80%"
    append-to-body
    @closed="closed"
    @opened="opened"
  >
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane
        :label="item.label"
        :name="item.componentName"
        v-for="item in panList"
        :key="item.id"
      >
        <keep-alive>
          <component
            :is="activeName"
            v-if="item.componentName === activeName"
            :ref="item.componentName"
          ></component>
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import hotelInfo from "./components/hotelInfo.vue";
import userInfo from "./components/userInfo.vue";
// import checkInInfo from "./components/checkInInfo.vue";
import timeOutInfo from "./components/timeOutInfo.vue";
import accountInfo from "./components/accountInfo.vue";
import bodyHealth from "./components/bodyHealth.vue";
import mentalHealth from "./components/mentalHealth.vue";
import leaveInfo from "./components/leaveInfo.vue";
export default {
  name: "userDetails",
  components: {
    hotelInfo,
    userInfo,
    // checkInInfo,
    timeOutInfo,
    accountInfo,
    bodyHealth,
    mentalHealth,
    leaveInfo,
  },
  props: {
    componentHideIds: {
      type: Array,
      default: () => [],
    },
    active: {
      type: String,
      default: 'hotelInfo'
    },
  },
  data() {
    return {
      // 弹窗显隐
      dialogVisible: false,
      // 显示tab项
      activeName: "hotelInfo",
    };
  },
  computed: {
    // tab组件信息
    panList() {
      let initArr = [
        { id: 1, label: "隔离点信息", componentName: "hotelInfo" },
        { id: 2, label: "隔离人员信息", componentName: "userInfo" },
        // { id: 3, label: "入住信息", componentName: "checkInInfo" },
        { id: 4, label: "隔离逾期登记", componentName: "timeOutInfo" },
        { id: 5, label: "核酸检测", componentName: "accountInfo" },
        { id: 6, label: "日常身体状况", componentName: "bodyHealth" },
        { id: 7, label: "日常心理状况", componentName: "mentalHealth" },
        { id: 8, label: "离点登记", componentName: "leaveInfo" },
      ];
      if (this.componentHideIds.length) {
        initArr = initArr.filter(
          (item) => !this.componentHideIds.includes(item.id)
        );
      }
      // console.log(initArr)
      return initArr;
    },
  },
  methods: {
    show() {
      this.dialogVisible = true;
      this.activeName = this.active;
    },
    handleTabClick(tab) {
      // console.log(tab);
    },
    closed() {
      sessionStorage.removeItem("hotelName");
    },
    opened() {
      this.$bus.$emit('previewInfoOpen')
    }
  },
};
</script>

<style lang="scss">
.userDetailsInfo {
  .el-dialog__body {
    padding: 0 20px;

    .basic-form {
      .form-wrap {
        padding-top: 0;
      }
    }
  }
}
</style>